<template>
  <div v-loading="loading">
    <el-breadcrumb>
      <el-breadcrumb-item
        :to="{ path: '/report' }"
      >上报管理</el-breadcrumb-item>
      <el-breadcrumb-item v-if="!disabled">新增</el-breadcrumb-item>
      <el-breadcrumb-item v-if="disabled && idS">详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="cad-box" style="margin: 20px 0; padding-top: 0px">
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">基本信息</div>
        <div class="obj_box">
          <div style="width: 100%">
            <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules"
              label-width="100px"
              class="demo-ruleForm"
              style="display: flex; flex-wrap: wrap"
            >
              <el-form-item
                label="汇报类型"
                prop="reportType"
                label-width="150px"
                :style="!disabled ? 'width: 50%' : 'width: 100%'"
              >
                <el-select
                  v-model="ruleForm.reportType"
                  style="width: 80%"
                  placeholder="请选择汇报类型"
                  :disabled="disabled"
                >
                  <el-option label="月报" :value="0" />
                  <el-option label="季报" :value="1" />
                  <el-option label="年报" :value="2" />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="!disabled"
                label="时间"
                prop="establishDate"
                style="width: 50%"
                label-width="150px"
              >
                <el-date-picker
                  v-model="ruleForm.establishDate"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 80%"
                  :picker-options="pickerOptions"
                  @change="handleChangeTime"
                />
              </el-form-item>
              <el-form-item
                label="在园儿童人数"
                prop="childrenCurrentlyEnrolled"
                style="width: 30%"
                label-width="150px"
              >
                <el-input
                  v-model="ruleForm.childrenCurrentlyEnrolled"
                  placeholder="请输入在园儿童人数"
                  :disabled="disabled"
                />
              </el-form-item>
              <el-form-item
                label="新入园儿童人数"
                prop="newlyEnrolledChildren"
                style="width: 30%"
                label-width="150px"
              >
                <el-input
                  v-model="ruleForm.newlyEnrolledChildren"
                  placeholder="请输入新入园儿童人数"
                  :disabled="disabled"
                />
              </el-form-item>
              <el-form-item
                label="离园儿童人数"
                prop="childrenLeft"
                style="width: 30%"
                label-width="150px"
              >
                <el-input
                  v-model="ruleForm.childrenLeft"
                  placeholder="请输入离园儿童人数"
                  :disabled="disabled"
                />
              </el-form-item>

              <el-form-item
                label="园所工作人数"
                prop="teachersCount"
                style="width: 30%"
                label-width="150px"
              >
                <el-input
                  v-model="ruleForm.teachersCount"
                  placeholder="请输入园所工作人数"
                  :disabled="disabled"
                />
              </el-form-item>
              <el-form-item
                label="新入园教师人数"
                prop="newlyHiredTeachers"
                style="width: 30%"
                label-width="150px"
              >
                <el-input
                  v-model="ruleForm.newlyHiredTeachers"
                  placeholder="请输入新入园教师人数"
                  :disabled="disabled"
                />
              </el-form-item>
              <el-form-item
                label="其他工作人员人数"
                prop="otherStaffMembers"
                style="width: 30%"
                label-width="150px"
              >
                <el-input
                  v-model="ruleForm.otherStaffMembers"
                  placeholder="请输入其他工作人员人数"
                  :disabled="disabled"
                />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="cad-box" style="margin: 20px 0; padding-top: 0px">
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">活动信息</div>
        <div v-if="!disabled" style="display: flex; margin-top: 20px">
          <div>
            <span style="color: red; margin-right: 8px">*</span>是否举办活动：
          </div>
          <div>
            <el-radio-group v-model="isShowActive">
              <el-radio label="0">是</el-radio>
              <el-radio label="1">否</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div v-if="isShowActive === '0'">
        <el-button
          v-if="!disabled"
          type="warning"
          style="margin: 20px 0px 10px 0px"
          @click="handleAddActive()"
        >添加</el-button>

        <div class="obj_box" style="margin-top: 0">
          <div style="width: 100%; font-size: 15px">
            <div
              v-for="(item, index) in activeFromList"
              :key="index"
              class="ac_box"
              style="position: relative"
            >
              <div
                v-if="!disabled"
                style="
                  position: absolute;
                  right: 20px;
                  top: 16px;
                  font-size: 24px;
                "
                @click="handleDeteleActive(index, activeFromList)"
              >
                <i class="el-icon-close" />
              </div>
              <div style="width: 100%">
                <div class="ac_top">
                  <div class="label" style="width: 100px; text-align: right">
                    <span style="color: red; margin-right: 8px">*</span>活动类型：
                  </div>
                  <div>
                    <el-select
                      v-model="item.activityType"
                      placeholder="请选择活动类型"
                      :disabled="disabled"
                    >
                      <el-option label="节日活动" value="0" />
                      <el-option label="亲子活动" value="1" />
                    </el-select>
                  </div>
                </div>
                <div style="display: flex; width: 100%; margin-top: 30px">
                  <div class="label" style="width: 100px; text-align: right">
                    活动照片：
                  </div>
                  <div>
                    <el-upload
                      style="position: relative; min-height: 148px"
                      action="/api/system/upload1"
                      list-type="picture-card"
                      accept="image/*"
                      :auto-upload="true"
                      :file-list="item.activityPhoto"
                      :disabled="disabled"
                      :on-success="
                        (response, file, fileList) =>
                          handleFileSuccess(response, file, fileList, item)
                      "
                    >
                      <i slot="default" class="el-icon-plus" />
                      <div slot="file" slot-scope="{ file }">
                        <img
                          style="height: 148px"
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        >
                        <div
                          class="text"
                          style="
                            display: block;
                            max-width: 148px;
                            word-break: break-all;
                          "
                        >
                          {{ file.name ? file.name : "" }}
                        </div>
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in" />
                          </span>
                          <span
                            class="el-upload-list__item-delete"
                            @click="handleDownload(file)"
                          >
                            <i class="el-icon-download" />
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file, item)"
                          >
                            <i class="el-icon-delete" />
                          </span>
                        </span>
                      </div>
                    </el-upload>
                  </div>
                </div>
              </div>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cad-box" style="margin: 20px 0; padding-top: 0px">
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">安全与卫生信息</div>
        <div v-if="!disabled" style="display: flex; margin-top: 20px">
          <div>
            <span style="color: red; margin-right: 8px">*</span>是否检查：
          </div>
          <div>
            <el-radio-group v-model="isShowCheck">
              <el-radio label="0">是</el-radio>
              <el-radio label="1">否</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div v-if="isShowCheck === '0'">
          <el-button
            v-if="!disabled"
            type="warning"
            style="margin: 20px 0px 10px 0px"
            @click="handleAddaq()"
          >添加</el-button>
          <div class="obj_box" style="margin-top: 0">
            <div style="width: 100%; font-size: 15px">
              <div
                v-for="(item, index) in aqFromList"
                :key="index"
                class="ac_box"
                style="position: relative"
              >
                <div
                  v-if="!disabled"
                  style="
                    position: absolute;
                    right: 20px;
                    top: 16px;
                    font-size: 24px;
                  "
                  @click="handleDeteleActive(index, aqFromList)"
                >
                  <i class="el-icon-close" />
                </div>

                <div class="ac_top">
                  <div class="label" style="width: 100px; text-align: right">
                    <span style="color: red; margin-right: 8px">*</span>检查类型：
                  </div>
                  <div>
                    <el-select
                      v-model="item.inspectionType"
                      placeholder="请选择活动类型"
                      :disabled="disabled"
                    >
                      <el-option label="节日活动" value="0" />
                      <el-option label="亲子活动" value="1" />
                    </el-select>
                  </div>
                </div>
                <div style="display: flex; width: 100%; margin-top: 30px">
                  <div class="label" style="width: 100px; text-align: right">
                    备注：
                  </div>

                  <div>
                    <el-input
                      v-model="item.remark"
                      :disabled="disabled"
                      type="textarea"
                      style="width: 500px"
                      :placeholder="disabled ? '暂无备注' : '请输入备注'"
                    />
                  </div>
                </div>
              </div>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cad-box" style="margin: 20px 0; padding-top: 0px">
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">财务信息</div>
        <div class="obj_box" style="margin-top: 0">
          <div style="width: 100%; display: flex">
            <div
              class="ac_top"
              style="
                display: flex;
                align-items: center;
                margin-top: 20px;
                width: 33%;
              "
            >
              <div class="label">
                <span style="color: red; margin-right: 8px">*</span><span v-if="ruleForm.reportType === 0">月收入：</span><span v-if="ruleForm.reportType === 1">季收入：</span><span v-if="ruleForm.reportType === 2">年收入：</span>
              </div>
              <div>
                <el-input
                  v-model="ruleForm.total"
                  placeholder="请输入"
                  style="width: 280px"
                  :disabled="disabled"
                />
              </div>
            </div>
            <div
              class="ac_top"
              style="
                display: flex;
                align-items: center;
                margin-top: 20px;
                width: 33%;
              "
            >
              <div class="label">
                <span style="color: red; margin-right: 8px">*</span><span v-if="ruleForm.reportType === 0">月支出：</span><span v-if="ruleForm.reportType === 1">季支出：</span><span v-if="ruleForm.reportType === 2">年支出：</span>
              </div>
              <div>
                <el-input
                  v-model="ruleForm.returnAmount"
                  placeholder="请输入"
                  style="width: 280px"
                  :disabled="disabled"
                />
              </div>
            </div>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="!disabled"
      class="cad-box"
      style="margin: 20px 0; padding-top: 0px"
    >
      <div
        style="
          width: 100%;
          margin-top: 40px;
          display: flex;
          justify-content: space-evenly;
        "
      >
        <el-button type="warning" @click="handleSubmit">确 认</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryByReportType,
  queryByTeach,
  overviewMoney,
  tuoGovInstitutionalReportAddAndEdit,
  getById
} from './api'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      isShowActive: '0',
      isShowCheck: '0',
      aqFromList: [
        {
          inspectionDone: '0',
          inspectionType: '0',
          remark: ''
        }
      ],
      activeFromList: [
        {
          activityHeld: '0',
          activityType: '0',
          activityPhoto: []
        }
      ],
      fileListOtherShow: [],
      fileListOther: [],
      ruleForm: {
        establishDate: [], // 时间
        reportType: 0, // 汇报类型（0月报1季报2年报）
        childrenCurrentlyEnrolled: '', // 在园儿童人数
        newlyEnrolledChildren: '', // 新入园儿童人数
        childrenLeft: '', // 离园儿童人数
        teachersCount: '', // 教师人数
        newlyHiredTeachers: '', // 新入园教师人数
        otherStaffMembers: '', // 其他工作人员人数
        total: '',
        returnAmount: ''
      },
      rules: {
        establishDate: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        reportType: [
          { required: true, message: '请选择汇报类型', trigger: 'change' }
        ],
        childrenCurrentlyEnrolled: [
          { required: true, message: '请输入在园儿童人数', trigger: 'blur' }
        ],
        newlyEnrolledChildren: [
          { required: true, message: '请输入离园儿童人数', trigger: 'blur' }
        ],
        childrenLeft: [
          { required: true, message: '请选择离园儿童人数', trigger: 'blur' }
        ],
        teachersCount: [
          { required: true, message: '请输入教师人数', trigger: 'blur' }
        ],
        newlyHiredTeachers: [
          {
            required: true,
            message: '请输入新入园教师人数',
            trigger: 'blur'
          }
        ],
        otherStaffMembers: [
          {
            required: true,
            message: '请输入其他工作人员人数',
            trigger: 'blur'
          }
        ]
      },

      loading: false,
      idS: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      dataObj: {},
      minDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.minDate = minDate // 记录用户选择的起始日期
        },
        disabledDate: (date) => {
          if (this.minDate) {
            // 如果已经选择了起始日期，则限制结束日期范围
            const minTime = this.minDate.getTime()
            let maxTime = minTime + 31 * 24 * 60 * 60 * 1000 // 起始日期后30天
            if (this.ruleForm.reportType === 0) {
              maxTime = minTime + 31 * 24 * 60 * 60 * 1000
            }
            if (this.ruleForm.reportType === 1) {
              maxTime = minTime + 93 * 24 * 60 * 60 * 1000
            }
            if (this.ruleForm.reportType === 2) {
              maxTime = minTime + 365 * 24 * 60 * 60 * 1000
            }
            return date.getTime() < minTime || date.getTime() > maxTime
          }
          return false // 没有选择起始日期时不限制
        }
      }
    }
  },
  computed: {
    ...mapGetters(['user', 'curArea'])
  },
  async created () {
    const { id, type } = this.$route.query
    this.disabled = type === 'info'
    this.idS = id
    console.log(this.idS, 'this.$route.query')
    if (this.disabled) {
      const res = await getById({
        id: this.idS
      })
      this.dataObj = res
      this.handleEdit()
    }
  },

  mounted () {},
  methods: {
    handleFileSuccess (response, file, fileList, item) {
      item.activityPhoto.push({
        uid: file.uid,
        name: response.data.originalName,
        url: response.data.url
      })
    },
    async handleSubmit () {
      if (this.ruleForm.total === '' || this.ruleForm.returnAmount === '') {
        this.$message.warning('请完善财务信息！')
        return false
      }
      this.activeFromList.map((item) => {
        item.activityPhoto = JSON.stringify(item.activityPhoto)
        return item
      })
      await tuoGovInstitutionalReportAddAndEdit({
        ...this.ruleForm,
        areaId: this.curArea.id,
        location: this.curArea.location,
        endTime: this.ruleForm.establishDate[1],
        startTime: this.ruleForm.establishDate[0],
        checkList: this.aqFromList,
        activeList: this.activeFromList,
        staffId: this.user.id,
        staffName: this.user.realName
      })
      this.$router.push('/report')
    },
    handleChangeTime () {
      this.handleQueryByReportType()
      this.handleQueryByTeach()
      this.handleOverviewMoney()
    },
    async handleOverviewMoney () {
      const res = await overviewMoney({
        startTime: `${this.ruleForm.establishDate[0]} 00:00:00`,
        endTime: `${this.ruleForm.establishDate[1]} 23:59:59`
      })
      this.ruleForm.total = res.total
      this.ruleForm.returnAmount = res.returnAmount
    },
    async handleQueryByReportType () {
      console.log(this.ruleForm.establishDate, 'handleQueryByReportType')
      const res = await queryByReportType({
        startTime: `${this.ruleForm.establishDate[0]} 00:00:00`,
        endTime: `${this.ruleForm.establishDate[1]} 23:59:59`,
        areaId: this.curArea.id
      })
      this.ruleForm.childrenCurrentlyEnrolled = res.childrenCurrentlyEnrolled
      this.ruleForm.childrenLeft = res.childrenLeft
      this.ruleForm.newlyEnrolledChildren = res.newlyEnrolledChildren
    },
    async handleQueryByTeach () {
      const res = await queryByTeach({
        startTime: `${this.ruleForm.establishDate[0]} 00:00:00`,
        endTime: `${this.ruleForm.establishDate[1]} 23:59:59`,
        areaId: this.curArea.id
      })
      this.ruleForm.newlyHiredTeachers = res.newlyHiredTeachers
      this.ruleForm.otherStaffMembers = res.otherStaffMembers
      this.ruleForm.teachersCount = res.teachersCount
    },
    handleAddActive () {
      this.activeFromList.push({
        activityHeld: '0',
        activityType: '0',
        activityPhoto: []
      })
    },
    handleAddaq () {
      this.aqFromList.push({
        inspectionDone: '0',
        inspectionType: '0',
        remark: ''
      })
    },
    handleDeteleActive (index, arr) {
      arr.splice(index, 1)
    },
    handleEdit () {
      this.ruleForm.childrenCurrentlyEnrolled =
        this.dataObj.childrenCurrentlyEnrolled
      this.ruleForm.childrenLeft = this.dataObj.childrenLeft
      this.ruleForm.establishDate = this.dataObj.establishDate
      this.ruleForm.newlyEnrolledChildren = this.dataObj.newlyEnrolledChildren
      this.ruleForm.newlyHiredTeachers = this.dataObj.newlyHiredTeachers
      this.ruleForm.otherStaffMembers = this.dataObj.otherStaffMembers
      this.ruleForm.reportType = this.dataObj.reportType
      this.ruleForm.returnAmount = this.dataObj.expenditure
      this.ruleForm.teachersCount = this.dataObj.teachersCount
      this.ruleForm.total = this.dataObj.income
      this.activeFromList = this.dataObj.activeList.map((item) => {
        if (item.activityPhoto !== '') {
          item.activityPhoto = JSON.parse(item.activityPhoto)
          return {
            activityHeld: '0',
            activityPhoto: item.activityPhoto.map((item, index) => {
              return {
                uid: index,
                url: item.url,
                name: item.name
              }
            }),
            activityType: String(item.activityType)
          }
        }
      })
      this.aqFromList = this.dataObj.checkList.map((item) => {
        return {
          inspectionDone: '0',
          remark: item.remark,
          inspectionType: String(item.inspectionType)
        }
      })
    },

    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload (file) {
      window.location.href = file.url
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  border: 1px solid #c0ccda;
  border-radius: 10px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  border: none !important;
  height: auto !important;
}
::v-deep .el-upload--picture-card {
  position: absolute;
  right: -148px;
  top: 0;
}
::v-deep .el-upload-list--picture-card {
  display: flex !important;
}
::v-deep .el-upload-list__item {
  overflow: inherit;
}
::v-deep .el-form-item {
  margin-bottom: 50px !important;
}
.left-user {
  display: flex;
  justify-content: space-between;
  .left-user-info {
    margin-left: 10px;
    line-height: 30px;

    .name-item {
      font-weight: bold;
    }

    .message-item {
      font-size: 13px;
      color: #808080;
    }
  }
}
.obj_title {
  font-size: 18px;
  font-weight: bold;
}
.obj_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;

  .ac_box {
    display: flex;
    padding: 50px 30px;
    margin: 20px;
    flex-wrap: wrap;
    border-radius: 8px;
    border: 1px solid rgb(235, 235, 238);

    .ac_top {
      width: 50%;
      display: flex;
      align-items: center;
    }
  }
  .obj_bt_box {
    width: 100%;
    display: flex;
    align-items: center;
    // .box_label {
    // }
    .box_value {
      margin: 30px 0px;
    }
  }
  .obj_item {
    width: 30%;
    padding: 20px 0px;
  }
}
.title-card {
  font-weight: bold;
  margin-bottom: 20px;
}

.flex-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-box {
  display: flex;

  .left-message {
    width: 65%;
    padding-right: 150px;

    .demo-ruleForm {
      ::v-deep .el-form-item {
        margin-bottom: 22px;
      }

      .box-border {
        margin-bottom: 30px;
        border-top: 1px solid #ebebee;
      }
    }

    ::v-deep .el-form-item {
      margin-bottom: 55px;
    }
  }
  .right-record {
    flex: 1;
    padding-left: 30px;
    margin-left: 30px;

    ::v-deep .el-card {
      background-color: #f6f8fa;
      border: 1px solid #f6f8fa;
    }
    ::v-deep .is-always-shadow {
      box-shadow: none;
    }

    ::v-deep .el-timeline-item__timestamp {
      color: black;
      font-size: 15px;
    }

    .text-content {
      margin-top: 20px;
      color: #808080;
    }
  }
}
</style>
